<template>
  <view>
    <view
      v-for="(products) in dataswiper.get_products"
      :key="products.order_uid"
      class="order"
    >
      <p class="order-title">商品信息</p>
      <view class="order-nfo">
        <image class="order-info-img" :src="products.cover_display" />
        <view class="order-info-right">
          <p>{{ products.product_name }}</p>
          <p>x {{ products.product_number }}</p>
          <p>￥{{ dataswiper.payment_amount }}</p>
        </view>
      </view>
      <p v-if="products.target_at !== null" class="order-text">
        <span>出行时间</span>
        <span>{{ products.target_at }}</span>
      </p>
      <p class="order-text">
        <span>入园方式</span>
        <span>证件识别</span>
      </p>
      <p class="order-title">旅客信息</p>
      <p v-for="guests in dataswiper.get_order_guests" :key="guests.order_uid" class="order-text">
        <span>{{ guests.full_name }} {{ guests.id_no.replace(guests.id_no.slice(6,14),'********') }}</span>
        <span>{{ guests.ubr_product_name }}</span>
      </p>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    dataswiper: {
      type: Object,
      default: function() {
        return {}
      }
    }
  },
  data() {
    return {
      listHeight: 0,
      swiperHeight: 0
    }
  },
  methods: {
  }
}
</script>

<style>

.order{
  width: 710rpx;
  border-radius: 8rpx;
  background-color: #ffffff;
  box-sizing: border-box;
  padding: 30rpx;
  padding-top: 0;
  margin-top: 30rpx;
  box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1);
}
.order-title{
  font-size: 32rpx;
  font-weight: 600;
  padding: 30rpx 0;
}

.order-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 40rpx;
}
.order-info-img {
  width: 236rpx;
  height: 198rpx;
  object-fit: cover;
}
.order-info-right {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 32rpx;
  font-weight: 500;
}
.order-info-right>p{
  direction: rtl;
}
.order-info-right>p:nth-child(3) {
  font-weight: 600;
}

.order-text{
  box-sizing: border-box;
  padding: 10rpx 0;
  display: flex;
  justify-content: space-between;
  font-size: 28rpx;
  font-weight: 400;
}
.order-text > span:nth-child(1){
  white-space: nowrap;
  margin-right: 20rpx;
}
.order-text > span:nth-child(2){
  direction: ltr;
}
</style>
